<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docum搜索历史记录02.htmlent</title>
    <style>
        #box {
            width: 500px;
        }
        
        #searchBox {
            display: flex;
            flex-wrap: wrap;
        }
        
        #searchBox>div.box2 {
            min-width: 100px;
            height: 40px;
            line-height: 40px;
            background-color: purple;
            margin: 10px;
            text-align: center;
            color: #fff;
            position: relative;
        }
        
        div.box2 span {
            position: absolute;
            top: -16px;
            right: 0px;
            color: red;
            display: none;
        }
        
        div.box2.show span {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="entry">
            <label>
                名称:<input type="text" id="ipt" />
            </label>
            <button type="button" id="search">搜索</button>
        </div>
        <div id="searchBox">

        </div>
        <div>
            <button type="button" onclick="delAll()">全部清除</button>
        </div>
    </div>

    <script>
        //获取input框
        var ipt = document.getElementById('ipt');
        var search = document.getElementById('search');
        var searchBox = document.getElementById('searchBox');

        var arr = [];

        window.onload = function() {
            if (localStorage.arrLocalData) {
                arr = JSON.parse(localStorage.arrLocalData);
            }
        }

        ipt.onkeydown = function(event) {
            var e = event || window.event;
            if (e.keyCode == 13) {
                add();
            }
        }

        search.onclick = function() {
            add();
        }

        //把input的值 添加到搜索列表里 
        function add() {
            var iptv = ipt.value;
            arr.push(iptv);
            console.log('arr:', arr);

            arr = noRepeat(arr);

            localStorage.arrLocalData = JSON.stringify(arr);
            //渲染
            render(arr);
        }

        //数组去重
        function noRepeat(arr) {
            var unique = [];
            for (var i = 0; i < arr.length; i++) {
                if (!unique.includes(arr[i])) {
                    unique.push(arr[i]);
                }
            }
            return unique;
        }

        //根据数据来渲染页面
        function render(arr) {

            var divs = '';
            // searchBox.innerHTML = '';
            for (var i = 0; i < arr.length; i++) {
                console.log('arr:', arr[i]);
                divs += `<div class="box2">
                            ${arr[i]}
                            <span onclick=del(${arr[i]})>X</span>
                        </div>`;
            }
            console.log('divs:', divs);
            searchBox.innerHTML = divs;
        }

        //全部清空
        function delAll() {
            arr = [];
            render(arr);
            localStorage.arrLocalData = JSON.stringify(arr);
            //渲染
            render(arr);
        }

        //删除
        function del(str) {
            for (i = 0; i < arr.length; i++) {
                if (str == arr[i]) {
                    arr.splice(i, 1);
                }
            }
            localStorage.arrLocalData = JSON.stringify(arr);
            //渲染
            render(arr);
        }

        //事件委托  实现每个历史记录的双击事件  业务逻辑
        searchBox.onclick = function(event) {
            var e = event || window.event;
            var currentElement = e.target || e.srcElement;
            if (currentElement.tagName == 'DIV') {
                currentElement.ondblclick = function() {
                    this.classList.toggle('show');
                }
            }
        }
    </script>
</body>

</html>